<template>
	<div>
		<div class="tabNav">
			<router-link to="/index">
                <img src="../assets/img/sidebar1.png" />首页
            </router-link>
			<router-link to="/assignment">
				<b class="colors">/<img style="top: 1px" src="../assets/img/sidebar6.png" />任务信息</b>
            </router-link>
			<b>/<i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-order"></i>任务信息详情</b>
			<!-- <el-input placeholder="请输入灵活用工平台名称进行搜索" suffix-icon="el-icon-search" v-model="search">
			</el-input> -->
			<!-- <em style="margin-left: -5px;">美莱市场推广</em> -->
		</div>
		<el-row :gutter="24" style="margin-bottom: 20px">
			<el-col :span="24">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="information">
						<div class="infoTit" style="margin-left: 30px;">
							<b style="font-weight: bold">基本信息</b>
						</div>
					</div>
					<div class="pad-loader" v-if="Object.keys(selectTaskInfoObj).length == 0">
						<content-loader :width="710" :height="200" :speed="3" primaryColor="#f3f3f3" secondaryColor="#ecebeb">
							<rect x="98" y="20" rx="6" ry="6" width="300" height="10" />
							<rect x="98" y="50" rx="6" ry="6" width="352" height="10" />
							<rect x="0" y="100" rx="6" ry="6" width="710" height="10" />
							<rect x="0" y="130" rx="6" ry="6" width="680" height="10" />
							<rect x="0" y="160" rx="6" ry="6" width="478" height="10" />
							<circle cx="40" cy="40" r="40" />
						</content-loader>
					</div>
					<div v-else class="infoCon">
						<b><em>任务名称：</em>{{ selectTaskInfoObj.name }}</b>
						<b><em>任务服务款：</em>{{ formatNumber(selectTaskInfoObj.taskPayment) }}</b>
						<b><em>任务类型：</em>{{ taskType[selectTaskInfoObj.taskType] }}</b>
						<b><em>需要人数：</em>{{ selectTaskInfoObj.needPeopleNum }}</b>
						<b style="white-space: nowrap;"><em>任务时限：</em>{{ format('yyyy-MM-dd hh:mm:ss', new Date(selectTaskInfoObj.releaseDate)) }} ～ {{ format('yyyy-MM-dd hh:mm:ss', new Date(selectTaskInfoObj.endDate)) }}</b>
						<b><em>任务地址：</em>{{ selectTaskInfoObj.taskAddress }}</b>
						<b style="width: 100%"><em>任务说明：</em><i>{{ selectTaskInfoObj.taskDescription }}</i></b>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24" style="margin-bottom: 20px">
			<el-col :span="24">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="information">
						<div class="infoTit" style="margin-left: 30px;">
							<b style="font-weight: bold">需求方信息</b>
						</div>
					</div>
					<div class="pad-loader" v-if="Object.keys(BussinessInfoObj).length == 0">
						<content-loader :width="710" :height="200" :speed="3" primaryColor="#f3f3f3" secondaryColor="#ecebeb">
							<rect x="98" y="20" rx="6" ry="6" width="300" height="10" />
							<rect x="98" y="50" rx="6" ry="6" width="352" height="10" />
							<rect x="0" y="100" rx="6" ry="6" width="710" height="10" />
							<rect x="0" y="130" rx="6" ry="6" width="680" height="10" />
							<rect x="0" y="160" rx="6" ry="6" width="478" height="10" />
							<circle cx="40" cy="40" r="40" />
						</content-loader>
					</div>
					<div class="infoCon" v-else>
						<b><em>企业名称：</em>{{ BussinessInfoObj.name }}</b>
						<b><em>法人姓名：</em>{{ BussinessInfoObj.legalName }}</b>
						<b><em>企业类型：</em>{{ BussinessInfoObj.businessTypeMsg }}</b>
						<b><em>经营状态：</em>{{ BussinessInfoObj.operationStatusMsg }}</b>
						<b><em>统一社会信用代码：</em>{{ BussinessInfoObj.socialCreditCode }}</b>
						<b><em>所属行业：</em>{{ BussinessInfoObj.industyMsg }}</b>
						<b><em>成立时间：</em>{{ BussinessInfoObj.openTime == null ? '' : format('yyyy-MM-dd hh:mm:ss', new Date(BussinessInfoObj.openTime)) }}</b>
						<b><em>登记机关：</em>{{ BussinessInfoObj.registerUnit }}</b>
						<b style="white-space: nowrap;"><em>营业期限：</em>{{ BussinessInfoObj.openTime == null ? '' : format('yyyy-MM-dd hh:mm:ss', new Date(BussinessInfoObj.openTime)) }} 至 {{ BussinessInfoObj.endTime == null ? '' : format('yyyy-MM-dd hh:mm:ss', new Date(BussinessInfoObj.endTime)) }}</b>
						<b><em>企业地址：</em>{{ BussinessInfoObj.address }}</b>
						<b style="width: 100%"><em>经营范围：</em><i>{{ BussinessInfoObj.businessScope }}</i></b>
						<b style="width: 100%">
							<em>营业执照照片：</em>
							<span style="padding-top:0; text-align:left" v-if="BussinessInfoObj.licenseUrl == null">-</span>
							<div class="image-box" v-else>
								<el-image :preview-src-list="[BussinessInfoObj.licenseUrl]" :src="BussinessInfoObj.licenseUrl"></el-image>
							</div>
						</b>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24" style="margin-bottom: 20px">
			<el-col :span="24">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="information">
						<div class="infoTit" style="margin-left: 30px;">
							<b style="font-weight: bold">平台方信息</b>
						</div>
					</div>
					<div class="pad-loader" v-if="Object.keys(platformInfoObj).length == 0">
						<content-loader :width="710" :height="200" :speed="3" primaryColor="#f3f3f3" secondaryColor="#ecebeb">
							<rect x="98" y="20" rx="6" ry="6" width="300" height="10" />
							<rect x="98" y="50" rx="6" ry="6" width="352" height="10" />
							<rect x="0" y="100" rx="6" ry="6" width="710" height="10" />
							<rect x="0" y="130" rx="6" ry="6" width="680" height="10" />
							<rect x="0" y="160" rx="6" ry="6" width="478" height="10" />
							<circle cx="40" cy="40" r="40" />
						</content-loader>
					</div>
					<div class="infoCon" v-else>
						<b><em>企业名称：</em>{{ platformInfoObj.name }}</b>
						<b><em>法人姓名：</em>{{ platformInfoObj.legalName }}</b>
						<b><em>企业类型：</em>{{ $store.state.companyType[platformInfoObj.businessType] }}</b>
						<b><em>经营状态：</em>{{ platformInfoObj.operationStatusMsg }}</b>
						<b><em>统一社会信用代码：</em>{{ platformInfoObj.operationStatusMsg }}</b>
						<b><em>所属行业：</em>{{ platformInfoObj.industyMsg	 }}</b>
						<b><em>成立时间：</em>{{ format('yyyy-MM-dd hh:mm:ss', new Date(platformInfoObj.createTime)) }}</b>
						<b><em>登记机关：</em>{{ platformInfoObj.registerUnit }}</b>
						<b><em>营业期限：</em>{{ format('yyyy-MM-dd hh:mm:ss', new Date(platformInfoObj.createTime)) + '至' + format('yyyy-MM-dd hh:mm:ss', new Date(platformInfoObj.endTime)) }}</b>
						<b><em>企业地址：</em>{{ platformInfoObj.name }}</b>
						<b style="width: 100%"><em>经营范围：</em><i>{{ platformInfoObj.businessScope }}</i></b>
						<b style="width: 100%">
							<em>营业执照照片：</em>
							<div class="image-box">
								<el-image :preview-src-list="[platformInfoObj.licenseUrl]" :src="platformInfoObj.licenseUrl"></el-image>
							</div>
						</b>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee" shadow="hover">
					<div class="cardTit">承揽方信息
					</div>
					<el-table :data="tableData" stripe style="width: 100%" @sort-change="sortChange">
						<el-table-column width="30">
						</el-table-column>
						<el-table-column prop="businessName" sortable="custom" label="承揽方">
						</el-table-column>
						<el-table-column prop="businessType" label="类型">
							<template #default="item">
								{{ businessType[item.row.businessType] }}
							</template>
						</el-table-column>
						<el-table-column prop="businessCreditCode" sortable="custom" label="统一社会信用代码">
						</el-table-column>
						<el-table-column prop="legalName" sortable="custom" label="法人">
						</el-table-column>
						<el-table-column prop="takeTime" sortable="custom" label="承接日期">
							<template #default="item">
							{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.takeTime)) }}
							</template>
						</el-table-column>
						<el-table-column prop="completeTime	" sortable="custom" label="完成日期">
							<template #default="item">
								<template v-if="item.row.completeTime == null">-</template>
								<template v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.completeTime)) }}</template>
							</template>
						</el-table-column>
						<el-table-column prop="caozuo" label="操作" width="120" class-name="editor">
							<template #default="item">
								<router-link :to="{path: '/IndividualDel', query: {id: item.row.businessId}}">
								<el-button type="text">详情</el-button>
							</router-link>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination v-if="tableData.length > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="arrPage" :page-size="selectPage"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</el-card>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	// 内容占位符
	import {
		ContentLoader
	} from 'vue-content-loader'
	export default {
		name: "dashboard",
		data() {
			return {
				orderByZH: false,
				orderByAsc: false,
				orderByColume: 'createTime',
				currentPage: 1,
				total: 0, // 总条数
				arrPage: [10, 20], // 每页条数
				selectPage: 10, // 每页选中条数
				tableData: [],
				search: '',
				businessType: {
					1: '企业',
					2: '灵活用工平台',
					3: '个体工商户'
				},
				businessTypes: {
					1: '企业',
					2: '灵活用工平台',
					3: '个体工商户'
				},
				// 任务类型
				taskType: {
					0: '家政',
					1: '陪护',
					2: '配送'
				},
				platformType: {
					1: 'api接入',
					2: 'OEM'
				},
				platformInfoObj: {}, // 平台方信息
				BussinessInfoObj: {}, // 需求方信息
				selectTaskInfoObj: {} //任务信息
			};
		},
		components: {
			ContentLoader
		},
		computed: {
			role() {
				return this.name === "admin" ? "超级管理员" : "普通用户";
			}
		},
		mounted() {
			this.getInfoDel(this.$route.query.id)
			this.getBussinessInfoDel(this.$route.query.id)
			this.getPlatformInfoDel(this.$route.query.id)
			this.getSelectSelfBusinessnfoDel(this.$route.query.id)
		},
		methods: {
			handleSizeChange(val) {
				// 切换每页条数调用
				this.selectPage = val
				this.getSelectSelfBusinessnfoDel()
			},
			handleCurrentChange(val) {
				// 切换当前页数调用
				this.currentPage = val
				this.getSelectSelfBusinessnfoDel()
			},
			open() {
				this.$alert('<img src="http://111.jingdong.applinzi.com/zh/images/yyzz.png" />', {
					dangerouslyUseHTMLString: true
				});
			},
			getInfoDel(id) {
				// 获取任务详情信息
				this.$http({
					url: '/api/task/selectTaskInfoByTaskId?taskId=' + id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if (data.code === 0) {
						this.selectTaskInfoObj = data.result
					}
				})
			},
			getBussinessInfoDel(id) {
				// 获取需求方信息
				this.$http({
					url: '/api/task/selectBusinessInfoByTaskId?taskId=' + id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if (data.code === 0) {
						this.BussinessInfoObj = data.result
					}
				})
			},
			getPlatformInfoDel(id) {
				// 获取平台方信息
				this.$http({
					url: '/api/task/selectPlatformInfoByTaskId?taskId=' + id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if (data.code === 0) {
						this.platformInfoObj = data.result
					}
				})
			},
			getSelectSelfBusinessnfoDel(id) {
				// 获取承揽方信息
				this.$http({
					url: '/api/task/selectSelfBusinessInfoByTaskId',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						"mixedStr": "",
						"pageNum": this.currentPage,
						"pageSize": this.selectPage,
						"platformId": "",
						"taskId": id,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					console.log(data)
					if (data.code === 0) {
						this.tableData = data.result.list
						this.total = data.result.total
					}
				})
			},
			sortChange(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.prop == "legalName" || d.prop == "businessName") {
					orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.prop
				}
				this.getSelectSelfBusinessnfoDel(this.$route.query.id);
			},
		}
	};
</script>
